<main>
	<header>
		<div class="toolbar">
			<a class="bar-button back-button"><i class="dwz-icon-arrow-left"></i></a>
			<div class="header-title">button按钮</div>
			<a class="bar-button" data-href="tpl/iframe_page.html?dwz_callback=biz.iframeRender&page_title=button文档&page_url=https://dwzteam.github.io/dwz_mobile_doc_v1/#/doc/h5/widget/button" target="navView" rel="doc"><i class="dwz-icon-document"></i>文档</a>
		</div>
	</header>

	<section>

		<div class="scroll-content dwz-scroll">
			<div class="scroll">

				<div class="dwz-panel">
					<div class="panel-header">
						<label class="panel-title">基础用法</label>
					</div>
					<div class="panel-content">
						<div class="flex-flow">
							<button class="button">默认按钮</button>
							<button class="button primary">主要按钮</button>
							<button class="button success">成功按钮</button>
							<button class="button info">信息按钮</button>
							<button class="button warning">警告按钮</button>
							<button class="button danger">危险按钮</button>
						</div>
						<div class="flex-flow t-line">
							<button class="button is-plain">朴素按钮</button>
							<button class="button primary is-plain">主要按钮</button>
							<button class="button success is-plain">成功按钮</button>
							<button class="button info is-plain">信息按钮</button>
							<button class="button warning is-plain">警告按钮</button>
							<button class="button danger is-plain">危险按钮</button>
						</div>
						<div class="flex-flow t-line">
							<button class="button is-text">文字按钮</button>
							<button class="button primary is-text">主要按钮</button>
							<button class="button success is-text">成功按钮</button>
							<button class="button info is-text">信息按钮</button>
							<button class="button warning is-text">警告按钮</button>
							<button class="button danger is-text">危险按钮</button>
						</div>
					</div>
				</div>

				<div class="divider"></div>
				<div class="dwz-panel">
					<div class="panel-header">
						<label class="panel-title">图标按钮</label>
					</div>
					<div class="panel-content">
						<div class="flex-flow">
							<button class="button"><i class="dwz-icon-s-home"></i>默认按钮</button>
							<button class="button primary"><i class="dwz-icon-menu"></i>主要按钮</button>
							<button class="button success"><i class="dwz-icon-shopping-cart-full"></i>成功按钮</button>
							<button class="button info"><i class="dwz-icon-info"></i>信息按钮</button>
							<button class="button warning"><i class="dwz-icon-success"></i>警告按钮</button>
							<button class="button danger"><i class="dwz-icon-error"></i>危险按钮</button>
						</div>

						<div class="flex-flow t-line">
							<button class="button"><i class="dwz-icon-search"></i></button>
							<button class="button primary"><i class="dwz-icon-star-off"></i></button>
							<button class="button success"><i class="dwz-icon-edit"></i></button>
							<button class="button info"><i class="dwz-icon-check"></i></button>
							<button class="button warning"><i class="dwz-icon-message"></i></button>
							<button class="button danger"><i class="dwz-icon-delete"></i></button>
						</div>

						<div class="flex-flow t-line">
							<button class="button is-circle"><i class="dwz-icon-search"></i></button>
							<button class="button primary is-circle"><i class="dwz-icon-star-off"></i></button>
							<button class="button success is-circle"><i class="dwz-icon-edit"></i></button>
							<button class="button info is-circle"><i class="dwz-icon-check"></i></button>
							<button class="button warning is-circle"><i class="dwz-icon-message"></i></button>
							<button class="button danger is-circle"><i class="dwz-icon-delete"></i></button>
						</div>

						<div class="flex-flow t-line">
							<button class="button is-mini is-circle"><i class="dwz-icon-search"></i></button>
							<button class="button primary is-mini is-circle"><i class="dwz-icon-star-off"></i></button>
							<button class="button success is-mini is-circle"><i class="dwz-icon-edit"></i></button>
							<button class="button info is-mini is-circle"><i class="dwz-icon-check"></i></button>
							<button class="button warning is-mini is-circle"><i class="dwz-icon-message"></i></button>
							<button class="button danger is-mini is-circle"><i class="dwz-icon-delete"></i></button>
						</div>

						<div class="flex-flow t-line">
							<button class="button is-mini is-plain is-circle" disabled><i class="dwz-icon-search"></i></button>
							<button class="button primary is-mini is-circle" disabled><i class="dwz-icon-star-off"></i></button>
							<button class="button success is-mini is-circle" disabled><i class="dwz-icon-edit"></i></button>
							<button class="button info is-mini is-circle" disabled><i class="dwz-icon-check"></i></button>
							<button class="button warning is-mini is-circle" disabled><i class="dwz-icon-message"></i></button>
							<button class="button danger is-mini is-circle" disabled><i class="dwz-icon-delete"></i></button>
						</div>
					</div>
				</div>

				<div class="divider"></div>
				<div class="dwz-panel">
					<div class="panel-header">
						<label class="panel-title">不同尺寸按钮</label>
					</div>
					<div class="panel-content">
						<div class="flex-flow">
							<button class="button">默认按钮</button>
							<button class="button is-md">中等按钮</button>
							<button class="button is-sm">小型按钮</button>
							<button class="button is-mini">超小按钮</button>
						</div>

						<div class="flex-flow">
							<button class="button primary">默认按钮</button>
							<button class="button is-md primary">中等按钮</button>
							<button class="button is-sm primary">小型按钮</button>
							<button class="button is-mini primary">超小按钮</button>
						</div>

						<div class="flex-flow">
							<button class="button success">默认成功</button>
							<button class="button is-md success">中等成功</button>
							<button class="button is-sm success">小型成功</button>
							<button class="button is-mini success">超小成功</button>
						</div>

						<div class="flex-flow">
							<button class="button warning">默认警告</button>
							<button class="button is-md warning">中等警告</button>
							<button class="button is-sm warning">小型警告</button>
							<button class="button is-mini warning">超小警告</button>
						</div>

						<div class="flex-flow">
							<button class="button danger">默认危险</button>
							<button class="button is-md danger">中等危险</button>
							<button class="button is-sm danger">小型危险</button>
							<button class="button is-mini danger">超小危险</button>
						</div>

						<div class="flex-flow">
							<button class="button primary" disabled>默认禁用</button>
							<button class="button is-md primary" disabled>中等禁用</button>
							<button class="button is-sm primary" disabled>小型禁用</button>
							<button class="button is-mini primary" disabled>超小禁用</button>
						</div>
					</div>
				</div>

				<div class="divider"></div>
				<div class="dwz-panel">
					<div class="panel-header">
						<label class="panel-title">圆角按钮</label>
					</div>
					<div class="panel-content">
						<div class="flex-flow">
							<button class="button is-round">默认按钮</button>
							<button class="button is-md is-round">中等按钮</button>
							<button class="button is-sm is-round">小型按钮</button>
							<button class="button is-mini is-round">超小按钮</button>
						</div>

						<div class="flex-flow">
							<button class="button primary is-round">默认按钮</button>
							<button class="button is-md primary is-round">中等按钮</button>
							<button class="button is-sm primary is-round">小型按钮</button>
							<button class="button is-mini primary is-round">超小按钮</button>
						</div>

						<div class="flex-flow">
							<button class="button success is-round">默认成功</button>
							<button class="button is-md success is-round">中等成功</button>
							<button class="button is-sm success is-round">小型成功</button>
							<button class="button is-mini success is-round">超小成功</button>
						</div>

						<div class="flex-flow">
							<button class="button warning is-round">默认警告</button>
							<button class="button is-md warning is-round">中等警告</button>
							<button class="button is-sm warning is-round">小型警告</button>
							<button class="button is-mini warning is-round">超小警告</button>
						</div>

						<div class="flex-flow">
							<button class="button danger is-round">默认危险</button>
							<button class="button is-md danger is-round">中等危险</button>
							<button class="button is-sm danger is-round">小型危险</button>
							<button class="button is-mini danger is-round">超小危险</button>
						</div>

						<div class="flex-flow">
							<button class="button primary is-round" disabled>默认禁用</button>
							<button class="button is-md primary is-round" disabled>中等禁用</button>
							<button class="button is-sm primary is-round" disabled>小型禁用</button>
							<button class="button is-mini primary is-round" disabled>超小禁用</button>
						</div>
					</div>
				</div>

				<div class="divider"></div>
				<div class="dwz-panel">
					<div class="panel-header">
						<label class="panel-title">按钮组+图标</label>
					</div>
					<div class="panel-content">

						<div class="button-group padding-vh">
							<button class="button is-mini">默认<i class="dwz-icon-s-home"></i></button>
							<button class="button is-mini primary">primary<i class="dwz-icon-star-on"></i></button>
							<button class="button is-mini success">success<i class="dwz-icon-star-off"></i></button>
							<button class="button is-mini danger">danger<i class="dwz-icon-more"></i></button>
						</div>
						<div class="button-group is-round padding-vh">
							<button class="button is-mini"><i class="dwz-icon-arrow-left"></i>默认</button>
							<button class="button is-mini primary">primary<i class="dwz-icon-delete"></i></button>
							<button class="button is-mini success">success<i class="dwz-icon-upload"></i></button>
							<button class="button is-mini warning">warning<i class="dwz-icon-arrow-right"></i></button>
						</div>

						<div class="button-bar padding-vh">
							<!-- <button class="button is-sm"><i class="dwz-icon-refresh"></i>默认</button> -->
							<button class="button is-sm primary"><i class="dwz-icon-search"></i>primary</button>
							<button class="button is-sm success"><i class="dwz-icon-upload"></i>success</button>
							<button class="button is-sm warning"><i class="dwz-icon-phone"></i>warning</button>
						</div>

						<div class="form-bar padding-h">
							<button class="button">默认</button>
							<button class="button primary">primary</button>
							<button class="button success">success</button>
							<button class="button danger">danger</button>
						</div>
					</div>
				</div>
			</div>
		</div>

	</section>
</main>

<script type="text/javascript">
	function helper(tpl, params) {
		// console.log(this, tpl, params)

		// 滚动列表文字
		this.find('.dwz-marquee-txt').each(function(index, elem) {
			new DwzMarquee({
				$el: elem
			});
		});

		// 滚动列表示例
		this.find('.dwz-marquee-list').each(function(index, elem) {
			new DwzMarquee({
				$el: elem,
				cls: "grid",
				itemCls: "tr",
				duration: 1000,
				pageSize: 4
			});
		});

	}
</script>